<template>
	<div>
		<div class="app-container">
			<el-card class="operate-container" shadow="never">
				<i class="el-icon-tickets" style="margin-top: 5px"></i>
				<span style="margin-top: 5px">数据列表</span>
				<el-button
						class="btn-add"
						@click="handleAddProductCate()"
						size="mini">
					添加
				</el-button>
			</el-card>
			<div class="table-container">
				<el-table ref="productCateTable"
						  style="width: 100%"
						  :data="list"
						  v-loading="listLoading" border>
					<el-table-column label="编号" width="100" align="center" prop="id">
						<template slot-scope="scope">{{scope.row.id}}</template>
					</el-table-column>
					<el-table-column label="品牌编号" width="100" align="center" prop="brandId">
						<template slot-scope="scope">{{scope.row.brandId}}</template>
					</el-table-column>
					<el-table-column label="分类名称" align="center" prop="name">
						<template slot-scope="scope">{{scope.row.name}}</template>
					</el-table-column>
					<el-table-column label="首字母" align="center" prop="initial">
						<template slot-scope="scope">{{scope.row.initial}}</template>
					</el-table-column>
					<el-table-column label="操作" width="200" align="center" prop="brandId">
						<template slot-scope="scope">
							<el-button
									size="mini"
									@click="handleUpdate(scope.row.brandId)">编辑
							</el-button>
							<el-button
									size="mini"
									type="danger"
									@click="handleDelete(scope.row.brandId)">删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="pagination-container">
				<el-pagination
						background
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						layout="total, sizes,prev, pager, next,jumper"
						:page-size="pageSize"
						:page-sizes="[5,10,15]"
						:current-page.sync="pageNum"
						:total="total">
				</el-pagination>
			</div>
		</div>
		<div class="topin"></div>
	</div>

</template>

<script>

	export default {
		name:"ProductBrandList",
		data(){
			return{
				list:[],
				pageNum:1,
				pageSize:5,
				total:'',
				listLoading: true,


			}
		},
		created(){
			this.getBrandList();
		},

		methods:{
			getBrandList(){
				this.listLoading = true;
				this.list = [];
				this.service.get("/product/manage/productBrand/search.do",{
					params:{
						pageNum:this.pageNum,
						pageSize:this.pageSize
					}
				}).then(res=>{
					if (res.data.status == 0){
						this.listLoading = false;
						this.total = res.data.data.total;
						//console.log(res.data.data)
						for (let i = 0;i<res.data.data.list.length;i++){
							let brand={
								id:'',
								brandId:'',
								name:'',
								initial:''
							};
							brand.id =i+1;
							brand.brandId = res.data.data.list[i].id;
							brand.name = res.data.data.list[i].name;
							brand.initial = res.data.data.list[i].firstChar;
							this.list.push(brand);
						}

					}
				})
			},
			handleAddProductCate() {
				this.$router.push({name:'添加商品品牌'});
			},
			handleUpdate(brandId) {
				this.$router.push({
					name:'修改商品品牌信息',
					params:{
						brandId:brandId
					}
				});
			},
			//删除类别信息
			handleDelete(brandId) {
				this.$confirm('是否要删除该品牌', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.service.get("/product/manage/productBrand/delete.do",{params:{id:brandId}}).then(response => {
						if (response.data.status==0){
							this.$message({
								message: '删除成功',
								type: 'success',
								duration: 1000
							});
							this.getBrandList();
						}else{
							this.$message.error('删除失败');
						}
						this.getBrandList();
						/*
                        this.$router.push({name:'商品分类'})*/
					});
				});
			},
			handleSizeChange(val) {
				this.pageNum = 1;
				this.pageSize = val;
				this.getBrandList();
			},
			handleCurrentChange(val) {
				this.pageNum = val;
				this.getBrandList();
			},
		},
	}

</script>

<style scoped>
	.el-pagination{
		float: right;
	}
	.batch-operate-container{
		float: left;

	}
	.topin{
		height:25px
	}
</style>